<template>
	<div class="search_main">
		<!--搜索栏-->
		<header class="fix">
			<div class="search_row fl fix">
				<div class="search_type fl fix">
					<div class="search_name fl">{{searchName}}</div>
					<!-- <img class="search_img fl" src="../assets/image/ico_blackunfold@2x.png"> -->
				</div>
				<input class="search_text fl" type="text" placeholder="连衣裙" v-model="keyWord" @keyup.13="show($event)">
			</div>
			<div class="cancel fr" @click="clear">取消</div>
		</header>
		<!--占位-->
		<div class="placeholder"></div>
		<!--搜索内容-->
		<div class="search_content">
			<!-- <div class="search_title">热门搜索</div>
			<ul class="hotsearch fix">
				<li class="hotsearch_li fl">拉夏贝尔</li>
			</ul> -->
			<div class="search_title">搜索历史</div>
			<ul class="searchhistory">
				<li class="searchhistory_li fix" v-for="item in searchhistoryLi">
					<img class="searchhistory_time fl" src="../assets/image/ioc_history@2x.png">
					<div class="searchhistory_name fl" @click="historyLi(item)">{{item}}</div>
					<!-- <img class="searchhistory_close fr" src="../assets/image/ioc_remove@2x.png"> -->
				</li>
			</ul>
			<div class="clearall" @click="clearALL">清空搜索历史</div>
		</div>
		<!--搜索栏弹窗-->
		<!-- <div v-bind:class="isSearchType" class="popup">
			<ul class="popup_list">
				<li class="popup_li" @click="isSearch">商品</li>
				<li class="popup_li" @click="isSearch">店铺</li>
			</ul>
		</div> -->
	</div>
</template>
<script type="text/javascript">
import Vue from 'vue'

export default {
	name: 'app',
	data () {
		return {
			searchList: '',
			userId: '',
			keyWord: '',
			page: '1',
			searchName:'商品',
			isSearchType: 'hidden',
			searchhistoryLi: '',
		}
	},
	mounted:function () {
		this.$nextTick(function () {
			this.getLocalStorage();
			this.searchView();
		});
	},
	methods:{
		// isSearch () {
		// 	this.isSearchType = this.isSearchType ? '': 'hidden';
		// },
		getLocalStorage:function () {
			this.userId = (window.localStorage.getItem('userId') || '[]');
		},
		searchView:function () {
			var _this = this;
			// 搜索历史记录
			this.$http.get(Util.ajaxPath.devSearchUrl+"shop-solr/sr/account/history/"+this.userId).then(function (res) {
				_this.searchhistoryLi = res.body.content;
			});
		},
		clearALL () {
			var _this = this;
			// 删除历史记录
			this.$http.get(Util.ajaxPath.devSearchUrl+"shop-solr/sr/account/historyDelete/"+this.userId).then(function (res) {
				_this.searchhistoryLi = res.body.content;
			});
		},
		show:function(ev){
			if(ev.keyCode == 13){
				// alert('你按回车键了');
				// this.$router.push({name: 'searchProductList', params: {userId: this.userId,keyWord: this.keyWord,page: this.page}});
				this.$router.push({name: 'searchProductList'});
				localStorage.setItem("userId", this.userId);
				localStorage.setItem("keyWord", this.keyWord);
				localStorage.setItem("page", this.page);
			}
		},
		historyLi (keyWord) {
			// this.$router.push({name: 'searchProductList', params: {userId: this.userId,keyWord: keyWord,page: this.page}});
			this.$router.push({name: 'searchProductList'});
			localStorage.setItem("userId", this.userId);
			localStorage.setItem("keyWord", keyWord);
			localStorage.setItem("page", this.page);
		},
		clear () {
			this.$router.go(-1);
		}
	}
}
</script>
<style lang="scss">
.search_main{
	header{ padding: 0.14rem 0.3rem; width: calc(100% - 0.6rem); height: 0.6rem; background: #fff; position: fixed; left: 0; top: 0; }
	.search_row{ padding: 0.11rem 0; width: 6.24rem; height: 0.38rem; background: #f4f5f5; border-radius: 0.3rem; }
	.search_type{ width: 1.62rem; height: 0.38rem; border-right: 1px solid #ddd; }
	.search_name{ padding-left: 0.4rem; line-height: 0.38rem; font-size: 0.26rem; color: #333; }
	.search_img{ padding: 0.14rem 0 0 0.24rem; width: 0.16rem; height: 0.11rem; }
	.search_text{ padding-left: 0.2rem; line-height: 0.38rem; font-size: 0.26rem; color: #333; background: #f4f5f5; }
	.cancel{ line-height: 0.6rem; font-size: 0.28rem; color: #ff365d; }
	.placeholder{ height: 0.9rem; }
	.search_content{ padding: 0 0.3rem; background: #fff; }
	.search_title{ height: 1.06rem; line-height: 1.06rem; font-size: 0.26rem; color: #333; }
	.hotsearch_li{ margin: 0.15rem 0.3rem 0.15rem 0; padding: 0 0.15rem; height: 0.52rem; line-height: 0.52rem; font-size: 0.26rem; color: #666; background: #f4f5f5; }
	.searchhistory_li{ height: 0.8rem; border-bottom: 1px solid #f1f1f1; }
	.searchhistory_time{ padding: 0.25rem 0.3rem 0 0.2rem; width: 0.3rem; height: 0.3rem; }
	.searchhistory_name{ line-height: 0.8rem; font-size: 0.26rem; color: #666; }
	.searchhistory_close{ padding-top: 0.25rem; width: 0.3rem; height: 0.3rem; }
	.clearall{ height: 1.68rem; line-height: 0.96rem; text-align: center; font-size: 0.26rem; color: #333; }
	.popup{ width: 100%; height: calc(100% - 0.9rem); background: rgba(0,0,0,.2); position: fixed; left: 0; top: 0.9rem; z-index: 20; }
	.popup_list{ width: 100%; background: #fff; position: fixed; left: 0; top: 0.9rem; }
	.popup_li{ padding-left: 0.7rem; height: 0.68rem; line-height: 0.68rem; font-size: 0.26rem; color: #333; }
}
</style>